<!--
 * @Author: xiameng 3297626645@qq.com
 * @Date: 2025-03-01 08:09:20
 * @LastEditors: xiameng 3297626645@qq.com
 * @LastEditTime: 2025-03-01 11:26:07
 * @FilePath: \ui\src\views\Orders\OrderTypesView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="120px">
                <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto;height: 585px;">
                    <el-menu default-active="2" class="el-menu-vertical-demo">
                        <el-menu-item-group title="">
                            <b>住宿订单</b>
                            <el-menu-item-group>
                                <el-menu-item index="2-1" @click="DFdd('OrderTypeDF')">订房订单</el-menu-item>
                                <el-menu-item index="2-2">住宿记录</el-menu-item>
                            </el-menu-item-group>
                            <el-divider>
                                <el-icon><star-filled /></el-icon>
                            </el-divider>
                            <b>商城订单</b>
                            <el-menu-item index="1-1" @click="DFdd('GoodsOrder')">订单记录</el-menu-item>
                            <el-menu-item index="1-2">预约订单</el-menu-item>
                            <el-menu-item index="1-3">核销记录</el-menu-item>
                            <el-divider>
                                <el-icon><star-filled /></el-icon>
                            </el-divider>
                            <b>餐饮订单</b>
                            <el-menu-item index="4-1">堂食订单</el-menu-item>
                            <el-divider>
                                <el-icon><star-filled /></el-icon>
                            </el-divider>
                            <b>售后管理</b>
                            <el-menu-item index="3-1">售后订单</el-menu-item>
                            <el-menu-item index="3-2">售后设置</el-menu-item>
                            <el-menu-item index="3-3">押金退款列表</el-menu-item>
                            <el-divider>
                                <el-icon><star-filled /></el-icon>
                            </el-divider>
                            <b>会员开卡订单</b>
                            <el-menu-item index="3-4">会员开卡订单</el-menu-item>
                            <el-divider>
                                <el-icon><star-filled /></el-icon>
                            </el-divider>
                            <b>充值订单</b>
                            <el-menu-item index="3-5">订单记录</el-menu-item>
                        </el-menu-item-group>



                    </el-menu>
                </ul>
            </el-aside>

            <el-main style="background-color:#f2f2f6;">
                <RouterView />
            </el-main>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue'
const router = useRouter();
const count = ref(0)
const load = () => {
    count.value += 2
}

const DFdd = (name: any) => {
    router.push({
        name: name
    })
}


</script>

<style>
.infinite-list {
    height: 300px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.infinite-list .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: var(--el-color-primary-light-9);
    margin: 10px;
    color: var(--el-color-primary);
}

.infinite-list .infinite-list-item+.list-item {
    margin-top: 10px;
}
</style>